<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度塌陷问题</title>
    <!--
        根据W3C的标准，在页面中的元素都有一个隐含的属性叫做 Block Formatting Context, 简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

        当开启元素的BFC以后，元素将会具有如下的特点：
        1. 父元素的垂直外边距不会和子元素重叠
        2. 开启BFC的元素不会被浮动元素所覆盖
        3. 开启BFC的元素可以包含浮动的子元素

        如何开启BFC？
        1. 设置元素的浮动
            使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题。
        2. 设置元素的绝对定位
            不推荐使用，原理同1
        3. 设置元素的inline-block
            可以解决问题，但是会导致父元素宽度丢失，所以不推荐使用这种方式。

        4. 将元素的overflow设置为一个非visible的值
            推荐使用这种方式，将overflow设置为hidden是副作用最小的开启BFC的方式。
        但是，在IE6中没有BFC，它有另个一隐含属性叫做hasLayout，该属性的作用和BFC类似，所以在IE6中可以通过开启hasLayout来解决该问题。
        开启的方式有很多，我们直接用一种最简单副作用最小的方式：直接将元素的zoom设置为1即可。

        zoom表示放大的意思，后面跟着一个数值，写几就代表放大几倍。
        zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
        zoom这个样式只在ie中支持，其他浏览器都不支持
    -->

    <style type="text/css">
        .box1 {
            border: red solid 10px;
            overflow: hidden;
            zoom: 1;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            float: left;
        }

        .box3 {
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>